<template>
<!--    style="width: 200px; min-height: calc(100vh - 50px);background-color:#2f3447"-->
    <div class="about">
        <el-menu
                style="width: 230px; min-height: calc(100vh + 40px);background-color:#2f3447;"
                :default-active="path"
                router
        >
            <el-menu-item index="/statistics" style="color: white">
                <i class="el-icon-s-home"></i>
                <span>首页</span>
            </el-menu-item>
            <el-submenu index="1" v-if="user.role === 1">
                <template #title>
                    <i class="el-icon-menu"></i>
                    <span style="color: white">系统管理</span>
                </template>
                <el-menu-item index="/user" style="background-color:#2f3447;color:white">
                    <i class="el-icon-user"></i>
                    <span>用户管理</span>
                </el-menu-item>
            </el-submenu>
            <el-menu-item index="/vaccine" style="color: white">
                <i class="el-icon-eleme"></i>
                <span>疫苗详情</span>
            </el-menu-item>
            <el-menu-item index="/subscribe" v-if="user.role === 1" style="color: white">
                <i class="el-icon-document"></i>
                <span>预约管理</span>
            </el-menu-item>
            <!--            <el-menu-item index="/statistics">
                            <i class="el-icon-data-line"></i>
                            <span>疫情统计</span>
                        </el-menu-item>-->
            <el-menu-item index="/news" style="color: white">
                <i class="el-icon-bell"></i>
                <span>疫情前沿</span>
            </el-menu-item>
            <el-menu-item index="/map" style="color: white">
                <i class="el-icon-location-information"></i>
                <span>百度地图</span>
            </el-menu-item>
<!--            <el-menu-item index="/im">
                <i class="el-icon-chat-dot-round"></i>
                <span>聊天室</span>
            </el-menu-item>-->
<!--            <el-menu-item index="/message" style="color: white">
                <i class="el-icon-chat-square"></i>
                <span>在线留言</span>
            </el-menu-item>-->
            <el-menu-item index="/liuyan" style="color: white">
                <i class="el-icon-chat-square"></i>
                <span>留言</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
    import request from "@/utils/request";

    export default {
        name: "Aside",
        data() {
            return {
                user: {},
                path: this.$route.path   // 设置默认高亮的菜单
            }
        },
        created() {
            let userStr = sessionStorage.getItem("user") || "{}"
            this.user = JSON.parse(userStr)

            // 请求服务端，确认当前登录用户的 合法信息
            request.get("/user/" + this.user.id).then(res => {
                if (res.code === '0') {
                    this.user = res.data
                }
            })
        }
    }
</script>

<style scoped>
    .about >>> .el-menu-item:hover {
        background: #5470c6  !important;
        color: #fff !important;
    }
    .about >>> .el-submenu__title:hover {
        background: #5470c6  !important;
        color: #fff !important;
    }
    .about >>> .el-menu-item.is-active {
        background: #5470c6  !important;
        color: #fff !important;
    }
    .about >>> .el-submenu__title.is-active {
        background: #5470c6  !important;
        color: #fff !important;
    }

</style>
